<template>
    <!-- <a-directory-tree multiple default-expand-all draggable @drop="onDrop">
        <a-tree-node key="0" title="零售业务申请索引">
            <a-tree-node title="零售业务申请">
                <a-tree-node key="0-0" title="身份证" is-leaf />
                <a-tree-node key="0-1" title="公积金资料" is-leaf />
            </a-tree-node>
        </a-tree-node>
        <a-tree-node key="1" title="零售业务申请索引">
            <a-tree-node title="零售业务申请">
                <a-tree-node key="1-0" title="身份证" is-leaf />
                <a-tree-node key="1-1" title="公积金资料" is-leaf />
            </a-tree-node>
        </a-tree-node>
    </a-directory-tree> -->
    <a-directory-tree
    class="draggable-tree"
    :default-expanded-keys="expandedKeys"
    draggable
    :tree-data="gData"
    @dragenter="onDragEnter"
    @drop="onDrop"
    show-icon
    defaultExpandAll
    multiple
    @select="onSelect"
  >
    <a-icon slot="switcherIcon" type="down" />
    <a-icon slot="file" type="file-text" />
    <!-- <template slot="custom" slot-scope="{ selected }">
      <a-icon :type="selected ? 'folder-open' : 'folder'" />
    </template> -->
    </a-directory-tree>
</template>
<script>

export default {
    name:"leftMenuList",
  data() {
    return {
      gData:[
          {
                title:"卡内限额信用贷款索引",
                key:'0-0',
                children: [
                    { title: 'leaf', key: '0-0-0', slots: { icon: 'file' },isLeaf:true },
                    { title: 'leaf1', key: '0-0-1', slots: { icon: 'file' },isLeaf:true },
                ],
          },
          {
              title:"零售业务申请索引",
              key:'0-1',
              children:[
                  {
                      title:"零售业务申请",
                      key:"0-1-0",
                      children:[
                          {title:"身份证件",key:"0-1-0-0",isLeaf:true},
                          {title:"公积金资料",key:"0-1-0-1",isLeaf:true}
                      ]
                  }
              ]
          }
      ],
      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],//默认选中的节点
    };
  },
  methods: {
    onDragEnter(info) {
      console.log(info);
      // expandedKeys 需要受控时设置
      this.expandedKeys = info.expandedKeys
    },
    onDrop(info) {
      console.log(info);
      const dropKey = info.node.eventKey;
      const dragKey = info.dragNode.eventKey;
      console.log(dropKey,dragKey);
      const dropPos = info.node.pos.split('-');
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
      
        if(!info.dropToGap && dropKey.length>5){
            return 
        }
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...this.gData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!info.dropToGap) { //添加子节点
        // Drop on the content
        loop(data, dropKey, item => {
            item.children = item.children || [];
            // where to insert 示例添加到尾部，可以是随意位置
            item.children.push(dragObj);
          
        });
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj);
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      this.gData = data;
    },
    onSelect(key,event){
      console.log(key);
      console.log(event);
      if(key[0].length == 3){
        this.$emit('addChange',false);
      }else{
        this.$emit('addChange',true);
      }
    }
  },
};
</script>
<style lang="less">
    .ant-tree,.ant-tree li .ant-tree-node-content-wrapper{
        color:#fff;
    }
    .ant-tree{
        padding:0 20px;
        line-height: 44px;
    }
    .ant-tree-child-tree > li:first-child,.ant-tree > li:first-child,.ant-tree > li:last-child,.ant-tree-child-tree > li:last-child{
        padding:0;
    }
    .ant-tree li .ant-tree-node-content-wrapper{
        display: inline-block;
    line-height: 44px;
    height: 44px;
    }
    .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before{
        height:44px;
    }
    .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover::before{
        display: block;
        line-height: 44px;
        height: 44px;
        background: rgba(16, 195, 250, 1);
    }
    .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle,.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper > span, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper > span{
        line-height: 44px;
    }
    .ant-tree li span[draggable], .ant-tree li span[draggable='true']{
        padding:0;
        border:none;
        margin:0;
    }
</style>